<template>
  <div class="view-container">

    <div class="main-content">

      <div class="list-container" style="padding-top: 0">

        <div class="my-tabs-container">

          <div class="my-tabs">

            <el-tabs v-model="activeName" style="width:100%" @tab-click="handleClick">
              <el-tab-pane label="企业代理" name="enterprise" />
              <el-tab-pane label="兼职大包" name="partTime" />
              <el-tab-pane label="终端" name="terminal" />
              <el-tab-pane label="商销客户" name="shangPin" />
            </el-tabs>

          </div>

        </div>

        <component :is="activeName" ref="refComponent" />
      </div>

    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  reactive,
  toRefs,
  onMounted
} from "vue";
import { useRouter, useRoute } from "vue-router";

export default {
  name: "Index",
  components: {
    enterprise: defineAsyncComponent(() => import("../modules/enterprise.vue")),
    partTime: defineAsyncComponent(() => import("../modules/partTime.vue")),
    terminal: defineAsyncComponent(() => import("../modules/terminal.vue")),
    shangPin: defineAsyncComponent(() => import("../modules/shangPin.vue")),
  },
  setup() {
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      activeName: "enterprise",
      refComponent: null,
      type: "agent",
    });

    onMounted(()=>{
      if(route.query.type){
        data.activeName = route.query.type
      }
    })

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
